<!DOCTYPE html>
<html>
    <head lang="zh">
        <meta http-equiv="Content-Type" content="text/html ;charset=utf-8">
        <meta name="google" content="notranslate" />
        <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="shortcut icon" type="image/x-icon" href="{{URL::asset('handan/images/logo-icon.png')}}" />
        <title>EAI交易圈</title>
        <link rel="stylesheet" href="{{ URL::asset('index/css/base.css') }}"/>
    </head>
    <body>
        <div id="box_echarts" style="width:1000px;height:600px;"></div>
    </body>
</html>
<script src="{{URL::asset('public_js/jquery-3.2.1.min.js')}}"></script>
<script src="{{ URL::asset('public_js/src/echarts.js') }}"></script>
<script src="{{ URL::asset('js/layer/layer.js') }}"></script>
<script>
    var final   = "{{$end_point_str}}",
        profit  = "{{$profit_point_str}}",
        loss    = "{{$loss_point_str}}",
         time = "{{$time}}";
    var final_data = [],
         profit_data =[],
         loss_data = [],
         x_line = [];
    final_data = dataFn(final,final_data,1);
    profit_data = dataFn(profit,profit_data,1);
    loss_data = dataFn(loss,loss_data,1);
    function dataFn(id,idData,type){
        id = id.split(',');
        id.forEach(function(data,index,arr){
            if(type == 1){
                idData.push(+data);
            }else{
                idData.push(data);
            }
        });
        return idData;
    }
    var hdfs_stack_bar_data = {
        "namelist": ["盈利", "止盈", "止损"],
        "dataArr_bar": {
            "盈利": final_data,
            "止盈": profit_data,
            "止损": loss_data
        }
    };
    x_line = dataFn(time,x_line,0);
//    console.log(final_data+'\n'+profit_data+'\n'+loss_data+'\n'+x_line);
    var colorConsArr_hdfs = ["#00acee", "#c8efff", "#c8efff"];
    charts_one("box_echarts",hdfs_stack_bar_data,x_line,colorConsArr_hdfs);
// 散点图表函数封装
function charts_one(id,hdfs_stack_bar_data,x_line,colorConsArr_hdfs){
    var myChartB = echarts.init(document.getElementById(id));
    var option = {
        animation: false,
        backgroundColor: 'rgba(46,54,76,1)', //设置背景色
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(7,14,28,0.9)',
            // position: function(point, params, dom) {
            //     // 固定在顶部
            //     return [point[0], '10%'];
            // },
            formatter:function(value,index){
                var tooltip='';
                var contentsDiv="";
                var barSum=0;
                for(var i=0;i<value.length;i++){
                    var barValue,lineValue;
                    value[i].hasOwnProperty("value")?barValue=value[i].value:barValue="暂无数据";
                    barValue.toString().indexOf("暂无数据")<0?barSum+=~~barValue:barSum+=0;
                    contentsDiv+="<div style='width:270px;height:13px;padding:5px 10px 6px 10px;font-size:14px;color:"+value[i].color+"'>"+"<span style='display:inline-block;margin-bottom:5px;width:12px;height:12px;border-radius:6px;background:"+value[i].color+"'>"+"</span>"+"<span style='display:inline-block;padding:0 5px 0 5px;width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>"+value[i].seriesName+"</span>"+"<span style='display:inline-block;padding:0 5px 0 5px;width:45px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>"+barValue+"</span></div>";
                }
                contentsDiv+="<div style='width:270px;height:13px;padding:5px 10px 6px 10px;font-size:14px;color:#6c65fb'></div>";
                tooltip="<div style='width:290px;height:100%;border-radius:8px;padding 10px 5px 10px 5px;margin-bottom:15px;'>"+"<span style='display:block;padding:16px 10px 0 10px;font-size:14px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'>"+value[0].axisValue+"资源使用情况"+"</span>"+contentsDiv+"<span style='display:block'>"+"</div>";
                return tooltip;

            }
        },
        grid: {
            left: '3%',
            right: '1%',
            bottom: '3%',
            top: "17%",
            containLabel: true,
            borderColor: '#1d203b'
        },
        legend: {
            itemGap: 14,
            right: '16%',
            top: '2%',
            //padding:[40,10,0,10],
            data: [] //ToDo
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: x_line,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            //坐标轴刻度标签
            axisLabel: {
                textStyle: {
                    color: "#fff"
                },
                formatter: function(value, index) {
                    var xName = value.substring(value.indexOf("-") + 1);
                    return xName.replace(/-/g, ".");
                },
                margin: 20
            },
            splitLine: {
                lineStyle: {
                    color: "#fff"
                }
            },

        }],
        yAxis: [{
            name: '单位（点数）',
            nameGap:20,
            nameTextStyle:{
                color:'#fff',
                fontSize: 12,
            },
            type: 'value',
            nameGap: 15,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            scale: true,
            axisLabel: {
                // formatter: function(value, idx) {
                //     if (idx === 0) {
                //         return value + "T";
                //     } else {
                //         return value;
                //     }
                // },
                textStyle: {
                    color: '#fff'
                },
                margin: 20
            },
            boundaryGap: [0.2, 0.2],
            splitLine: {
                lineStyle: {
                    color: ["#1d203b"]
                }
            },
            min:'dataMin',
            max:'dataMax'
//            ,interval:100
        }, {
            name: '单位（日期）',
            nameGap:20,
            nameTextStyle:{
                color:'#fff',
                fontSize: 12,
            },
            type: 'value',
            nameGap: 15,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            scale: true,
            axisLabel: {
                // formatter: function(value, idx) {
                //     if (idx === 0) {
                //         return value + "%";
                //     } else {
                //         return value;
                //     }
                // },
                textStyle: {
                    color: '#fff'
                },
                margin: 20
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: ["#1d203b"]
                }
            },
            boundaryGap: [0.2, 0.2]
        }],
        series: []
    };
    for (var i = 0; i < hdfs_stack_bar_data["namelist"].length + 1; i++) {
        var namelist = hdfs_stack_bar_data["namelist"];
        if (i < hdfs_stack_bar_data["namelist"].length) {
            option.series.push({
                name: namelist[i],
                type: 'bar',
                stack: '广告',
                barWidth: "50%",
                data: hdfs_stack_bar_data['dataArr_bar'][namelist[i]],
                itemStyle: {
                    normal: {
                        color: colorConsArr_hdfs[i],
                        borderWidth: 1,
                        borderColor: '#00acee'
                    }
                }
            });
            option.legend.data.push({
                name: namelist[i],
                icon: "circle",
                textStyle: {
                    color: []
                }
            });
        }
    };
    myChartB.setOption(option);
}
</script>
